<template>
	<a-modal v-bind="options" width="80%">
		<a-typography-text strong>
			<blockquote style="margin-top: 0">房屋配置</blockquote>
		</a-typography-text>
		<vxe-grid :columns="columns" align="center" :data="detail.articles" border show-overflow size="small" :max-height="300" :row-config="{isHover: true}" />
		<a-typography-text strong>
			<blockquote>备注</blockquote>
		</a-typography-text>
		<div v-if="detail.comment">{{ detail.comment }}</div>
		<div v-else v-color="{color: 'gray'}">无</div>
		<a-typography-text strong>
			<blockquote>水电燃气底数</blockquote>
		</a-typography-text>

		<vxe-table :data="[{}]" border size="small" show-overflow>
			<vxe-column v-for="meter in detail.meters" :key="meter.deviceType" header-align="center">
				<template #header>
					{{ METER_DEVICE_MAP[meter.deviceType] }}
				</template>
				<template #default>
					<div style="text-align: center">
						{{ meter.read || '--' }}
						<span v-show="meter.read">吨</span>
					</div>
				</template>
			</vxe-column>
		</vxe-table>
		<a-typography-text strong>
			<blockquote>附件</blockquote>
		</a-typography-text>
		<file-preview v-if="detail.attachmentDtos && detail.attachmentDtos.length" :files="detail.attachmentDtos" />
		<div v-color="{color: 'gray'}" v-else>未上传附件</div>
	</a-modal>
</template>
<script setup lang="ts">
	import {onMounted, ref, reactive, toRef, watch} from 'vue'
	import {getHouseDeliveryGetNoe} from '@/api/contract'
	import {METER_DEVICE_MAP} from '@/constant/device'
	import {defaultMeters} from '@/interface/contract'
	import FilePreview from '@/components/common/file-preview.vue'
	import XEUtils from 'xe-utils'
	import {getAllDeliveryOrder} from '@/api/charter-contract'

	const props = defineProps<{
		visible: boolean
		id: string
	}>()
	const emits = defineEmits(['update:visible', 'close'])
	const options = reactive({
		title: '物业交割单',
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		},
		onOk() {}
	})

	const columns = [
		{title: '种类', field: 'typeName'},
		{title: '物品名称', field: 'configName'},
		{title: '价格(元)', field: 'price'},
		{title: '数量', field: 'count'}
	]

	const detail = ref<any>({
		articles: [],
		attachmentDtos: [],
		comment: '',
		attachments: '',
		meters: []
	})
	const getDetails = () => {
		let contractId = props.id
		let deliveryType = 1
		getAllDeliveryOrder(contractId, deliveryType).then(res => {
			// console.log(res)
			detail.value.articles = res?.data?.articles ? res?.data?.articles : []
			detail.value.attachmentDtos = res?.data?.attachmentDtos ? res?.data?.attachmentDtos : []
			detail.value.attachmentDtos = res?.data?.attachmentDtos ? res?.data?.attachmentDtos : []
			detail.value.meters = res?.data?.meters ? res?.data?.meters : []
			detail.value.comment = res?.data?.comment
		})
	}

	watch(
		() => props.visible,
		newVal => {
			if (newVal) {
				getDetails()
			}
		}
	)
</script>
<style lang="less" scoped>
	.d-module-title {
		margin: 15px 0 5px;
	}
</style>
